import { PureComponent } from 'react'
import { connect } from 'dva';
import { Tabs, Input, Select, Radio, DatePicker, Button } from 'antd'
import SingleTable from 'components/table/index'
import styles from './oderData.less'


const { TabPane } = Tabs
const { Option } = Select
@connect(({ loading, example = {} }) => ({    //其中global={}表示global中的所有state
  commonList: example.commonList,   //读取原有的state，即models中的global.js文件中的weather
  userList: example.userList,
  totalCount: example.total,
  oderList: example.oderList,
  oderTotal: example.oderTotal,
  loading: loading.effects['example/getCommonListData'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))
export default class OderData extends PureComponent {
  state = { size: '1' }
  onChange = (e) => {
    this.setState({ size: e.target.value });
  }
 
  render() {
    const { size } = this.state
    const columns = [
      {
        key: '1',
        title: '转运单号',
        dataIndex: 'gmtCreate',
        align: 'center',
      },
      {
        key: '2',
        title: '国内转运单号',
        dataIndex: 'operationTypeName',
        align: 'center',
      },
      {
        key: '3',
        title: '创建时间',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '4',
        title: '客户会员号',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '5',
        title: '产品类型',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '6',
        title: '订单状态',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '7',
        title: '物流状态',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '8',
        title: '始发港',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '9',
        title: '目的港',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '10',
        title: '海关申明报价',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '11',
        title: '体积重量(KG)',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '12',
        title: '实际毛重量(KG)',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '13',
        title: '货币单位',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '14',
        title: '其他费用',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '15',
        title: '总运费',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '16',
        title: '已收款',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '17',
        title: '未收款',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '18',
        title: '增值服务',
        dataIndex: 'creatorName',
        align: 'center',
      },
      {
        key: '19',
        title: '备注',
        dataIndex: 'creatorName',
        align: 'center',
      },
    ]
    const data = [];
   
    return (
      <div className={styles.oderData}>
        <div className={styles.oderDataBox}>
         <div className={styles.headerTitle}>
            <h2>运单数据</h2>
            <Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }} className={styles.radioStyle}>
              <Radio.Button value="1">精确查询</Radio.Button>
              <Radio.Button value="2">模糊查询</Radio.Button>
            </Radio.Group>
          </div>
          <div className={styles.tabBox}>
            <Tabs activeKey={size} defaultActiveKey="1" >
              <TabPane tab=" " key="1">
                <div className={styles.searchSingle} >
                  <div className={styles.searchOne} >
                    <span className={styles.spanStyle}>IAE运单号：</span>
                    <Input className={styles.inputSecond}/>
                  </div>
                  <div className={styles.searchOne} style={{marginLeft: '49px'}}>
                    <span className={styles.spanStyle}>国内运单号：</span>
                    <Input className={styles.inputSecond}/>
                  </div>
                </div>
                <Button type="primary" style={{margin: '24px 0'}}>查询</Button>
              </TabPane>
              <TabPane tab=" " key="2">
                <div className={styles.searchSecond}>
                  <div className={styles.serachSeSin} >
                    <span className={styles.spanStyle} >客户ID：</span>
                    <Input className={styles.inputOne} />
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle} >收件人：</span>
                    <Input className={styles.inputOne} />
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle} >收件人电话：</span>
                    <Input className={styles.inputOne} />
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle} >支付状态：</span>
                    <Select defaultValue="lucy" className={styles.inputOne} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                </div>
                <div className={styles.searchSecond}>
                  <div className={styles.serachSeSin} >
                    <span className={styles.spanStyle} >产品类型：</span>
                    <Select defaultValue="lucy" className={styles.inputTree} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle}>运单类型：</span>
                    <Select defaultValue="lucy" className={styles.inputTree}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle}>物流状态：</span>
                    <Select defaultValue="lucy" className={styles.inputTree}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle}>订单状态：</span>
                    <Select defaultValue="lucy" className={styles.inputTree}>
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                </div>
                <div className={styles.searchSecond}>
                  <div className={styles.serachSeSin} >
                    <span className={styles.spanStyle} >始发港：</span>
                    <Select defaultValue="lucy" className={styles.inputTree} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.serachSeSin} style={{margin: '0 28px'}}>
                    <span className={styles.spanStyle}>目的港：</span>
                    <Select defaultValue="lucy" className={styles.inputTree} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.serachSeSin} >
                    <span className={styles.spanStyle}>仓库：</span>
                    <Select defaultValue="lucy" className={styles.inputTree} >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  </div>
                  <div className={styles.serachSeSin} style={{marginLeft: '28px'}}>
                    <span className={styles.spanStyle}>开始时间：</span>
                    <DatePicker  className={styles.inputTree} />
                  </div>
                </div>
                <div className={styles.searchSecond}>
                  <div className={styles.serachSeSin} >
                    <span className={styles.spanStyle}>结束日期：</span>
                    <DatePicker  className={styles.inputTree} />
                  </div>
                </div>
               <Button type="primary" style={{marginBottom: '24px'}}>查询</Button>
              </TabPane>
            </Tabs>
          </div>
          <div style={{padding: '0 24px'}} className={styles.oderDatatable}>
            <SingleTable
                data={{ list: data }}
                columns={columns}
                
            />
          </div>
        </div>
      </div>
    )
  }
}
